<template>
  <Swiper
    @swiper="handleInitSwiper"
    @slide-change="handleSliderChange"
    :modules="modules"
    no-swiping
    no-swiping-class="stop-swiping"
  >
    <slot></slot>
  </Swiper>
</template>
<script lang="ts" setup name="s-tabs-window">
import { ref, watch, provide } from "vue";
import { Swiper } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper";
import "swiper/swiper-bundle.css";
import { onMounted } from "vue";
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0,
  },
  modules: {
    type: Array,
    default: () => [],
  },
});
const swiperRef = ref<SwiperType | null>(null);
provide("sTabsWindow", swiperRef);
const emit = defineEmits(["update:modelValue", "slideChange"]);

const modelValue = defineModel({ type: Number, default: 0 });

onMounted(() => {
  setTimeout(() => {
    swiperRef.value?.slideTo(modelValue.value);
  }, 80);
});

watch(
  () => modelValue.value,
  () => {
    swiperRef.value?.slideTo(modelValue.value);
  }
);

function handleInitSwiper(swiper: SwiperType) {
  swiperRef.value = swiper;
}
function handleSliderChange(swiper: SwiperType) {
  modelValue.value = swiper.activeIndex;
  emit("slideChange", swiper.activeIndex);
}

defineExpose({
  swiperRef,
});
</script>
